<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品卡片布局</title>
		<style>
			/* 思路：1.去除元素默认外边距【通配选择器】 设置背景颜色
			        2.product——card 设置样式：内边框
					  加阴影 所有内容--居中：text-align:center
					3.图片边框倒角，外边框？
					4.小米su7文字：外边距
					5.￥279999.00文字大小，外边距？
					6.颜色，外边距？内边距？*/
				#product_card{
					width: 300px;
					hright: 400px;
					text-align: center;
					border: 1px solid #cecece;
					padding: 20px;
					box-shadow: 4px 4px 4px 4px #cecece;
					border-radius: 10px 10px 10px 10px;
				}
				#a{
					color: #ff0000;
				}
				p{
					color: #9e9b9a;
				}
				#b{
					border: 1px solid #919191;
					width: 200px;
					height: 25px;
					background: white;
					text-align: center;
					border-radius: 5px 5px 5px 5px;
				}
				button{
					color: #ffffff;
					background: #ff0000;
				}
		</style>
	</head>
	<body>
		<div id="product_card">
			<img src="img/海报.jpg" alt="su7" width="260px" height="350px">
			<h3>小米su7</h3>
			<p id="a">￥279999.00</p>
			<p>已有 <span> 10万+ </span> 人评价</p>
		</div>
		<hr />
		<div id="b">
			<input type="text"  class="c" placeholder="搜索 京东商品"/>
			<button>搜索</button>
		</div>
		
	</body>
</html>